<template>
  <div id="dormitory">
    <div id="limit">
      寝室名：
      <el-input class="magin-right" placeholder="请输入楼栋关键字" v-model="name" clearable></el-input>
      楼栋：
      <el-select class="magin-right" v-model="buildingId" clearable placeholder="请选择楼栋">
        <el-option
          v-for="gender in dormitoryOptions"
          :key="gender.id"
          :label="gender.name"
          :value="gender.id">
        </el-option>
      </el-select>
      <el-button type="primary" round @click="getDormitory">查询</el-button>
      <el-button type="success" round @click="addDormitoryDialogVisible = true">新增</el-button>
    </div>
    <div id="table" class="magin-top">
      <el-table :data="dormitoryList" style="width: 100%">
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="寝室名" prop="name"></el-table-column>
        <el-table-column label="所属楼栋" prop="buildingName"></el-table-column>
        <el-table-column label="性别" prop="gender">
          <template slot-scope="scope">
            <span v-if="scope.row.gender===0">男</span>
            <span v-else-if="scope.row.gender===1">女</span>
            <span v-else>查询失败</span>
          </template>
        </el-table-column>
        <el-table-column label="床位" prop="bedNum"></el-table-column>
        <el-table-column label="剩余床位" prop="remainingBeds"></el-table-column>
        <el-table-column label="室长" prop="masterName"></el-table-column>
        <el-table-column label="成员" prop="studentNameStr"></el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button size="mini" type="info" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div id="pagination">
      <el-row>
        <el-col :span="1" :offset="15">
          <el-pagination
            background
            :page-size="pageSize"
            :page-sizes="[5,10,15,20]"
            :current-page="pageNow"
            @size-change="handlePageSizeChange"
            @current-change="handlePageCurrentChange"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </el-col>
      </el-row>
    </div>
    <div id="addDormitoryDialog">
      <add-dormitory-dialog :add-dormitory-dialog-visible="addDormitoryDialogVisible"></add-dormitory-dialog>
    </div>
    <div id="updateDormitoryDialog">
      <update-dormitory-dialog
        :update-dormitory-dialog-visible="updateDormitoryDialogVisible"
        :update-dormitory-form="updateDomitoryForm"
        :building-options="buildingOptions">
      </update-dormitory-dialog>
    </div>
  </div>
</template>

<script>
  import dormitory from '../../api/dormitory/dormitory'
  import building from '../../api/dormitory/building'
  import AddDormitoryDialog from './addDormitoryDialog'
  import UpdateDormitoryDialog from './updateDormitoryDialog'

  export default {
    name: 'dormitory',
    components: { UpdateDormitoryDialog, AddDormitoryDialog },
    data() {
      return {
        name: '',
        pageSize: 5,
        pageNow: 1,
        buildingId: '',
        total: 0,
        addDormitoryDialogVisible: false,
        updateDormitoryDialogVisible: false,
        dormitoryOptions: [],
        buildingOptions: [],
        dormitoryList: [],
        updateDomitoryForm: {}
      }
    },
    created() {
      this.getAllBuilding()
      this.getDormitory()
    },
    methods: {
      /*获取寝室*/
      getDormitory() {
        let dormitoryInfo = {
          pageNow: this.pageNow,
          pageSize: this.pageSize
        }
        if (this.name.length > 0) {
          this.$set(dormitoryInfo, 'name', this.name)
        }
        if (this.buildingId) {
          this.$set(dormitoryInfo, 'buildingId', this.buildingId)
        }
        dormitory.getDormitory(dormitoryInfo).then(res => {
          console.log(res)
          this.dormitoryList = res.data
          this.total = res.total
        })
      },
      /*获取简单楼栋信息*/
      getAllBuilding() {
        building.getAllSimpleBuilding().then(res => {
          this.dormitoryOptions = res.data
        })
      },
      /*改变页面大小*/
      handlePageSizeChange(pageSize) {
        this.pageSize = pageSize
        this.getDormitory()
      },
      /*改变当前页*/
      handlePageCurrentChange(pageNow) {
        this.pageNow = pageNow
        this.getDormitory()
      },
      /*编辑*/
      handleEdit(row) {
        building.getBuildingByGender(row.gender).then(res => {
          this.buildingOptions = res.data
        })
        this.updateDormitoryDialogVisible = true
        this.updateDomitoryForm = row
      },
      /*删除*/
      handleDelete(id) {
        this.$confirm('确定删除该寝室么？删除后不可恢复', '警告', {
          confirmButtonText: '确认删除',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          new Promise((resolve, reject) => {
            dormitory.delDormitory(id).then(() => {
              this.$message.success('删除成功')
              this.getDormitory()
              resolve()
            }).catch(e => {
              reject(e)
            })
          })
        })
      },
      /*关闭dialog*/
      closeDialog() {
        this.addDormitoryDialogVisible = false
        this.updateDormitoryDialogVisible = false
      }

    }
  }
</script>

<style scoped>
  #dormitory {
    margin-top: 20px;
  }

  #limit {
    margin-left: 20px;
  }

  .magin-right {
    margin-right: 20px;
    width: 200px;
  }

  .magin-top {
    margin-top: 20px;
  }

  #table {
    margin-left: 20px;
  }
</style>
